import { createApp } from './lib/vue.esm-browser.js'
import Event from './lib/event.js'
import TodoHeader from './components/todo-header.js'
import TodoInput from './components/todo-input.js'
import TodoList from './components/todo-list.js'
import TodoFooter from './components/todo-footer.js'

// 创建 Event 对象
const event = new Event()

/**
 * 存储所有待办事项，使用数组的结构来存储。
 * 每一项待办事项，可使用对象结构来表示，如:
 * [
 *  {id: 1, title: '待办事项标题内容', completed: true}
 * ]
 */
const todos = [
  {id: 1, title: '复习 JavaScript', completed: false},
  {id: 2, title: '复习 HTML', completed: true},
  {id: 3, title: '复习 CSS', completed: false},
  {id: 4, title: '预习 Vue', completed: false},
]

// ID 编号
let NEXT_ID = 5


// 创建应用实例
const app = createApp({
  data() {
    return {
      todos,
    }
  },
  methods: {
    /**
     * 处理添加新待办事项
     */
    handleAddTodoItem(title) {
      console.log('app:', this.$bus)
      this.todos.push({
        id: NEXT_ID++,
        title,
        completed: false,
      })
    },
    /**
     * 删除待办事项
     * @param {*} id 
     */
    removeTodoItem(id) {
      this.todos = this.todos.filter(todo => todo.id !== id)
    },
    /**
     * 修改待办事项状态
     */
    toggleTodoItem(id) {
      this.todos = this.todos.map(todo => {
        if (todo.id === id) {
          todo.completed = !todo.completed
        }
        return todo
      })
    },
  },
  // 在组件实例创建后自动调用到
  // 这是一个生命周期钩子函数
  created() {
    // 注册事件监听，用于接收待删除待办事项的 id，然后实现删除业务
    this.$bus.on('remove', this.removeTodoItem)
    // 注册事件监听，用于接收待修改状态的待办事项 id，实现修改状态业务
    this.$bus.on('toggle', this.toggleTodoItem)
  },
})

// 添加全局属性
// 在全局属性对象中添加的 $bus 是可以在所有组件中都通过 `this.$bus` 调用到的
app.config.globalProperties.$bus = event

// 全局注册组件
app.component('todo-header', TodoHeader)
app.component('todo-input', TodoInput)
app.component('todo-list', TodoList)
app.component('todo-footer', TodoFooter)

// 挂载
app.mount('#root')
